<template>
	<view>
		<u-navbar title="聊天信息"></u-navbar>
		<navigator :url="`/pages/user/info?id=${id}`" class="group u-m-t-20">
			<u-avatar :src="conversation._target&&(conversation._target.saveAvatar||conversation._target.avatarUrl)||conversation.avatar" size="100" mode="square"></u-avatar>
			<view class="main u-m-l-20">
				<text class="u-font-30">{{conversation.remarks||conversation.name}}</text>
			</view>
			<text class="arrow iconfont icon-arrow-right"></text>
		</navigator>
		<view class="group u-m-t-20 u-border-bottom">
			<view class="main">
				<text class="u-font-30">消息免打扰</text>
			</view>
			<u-switch :value="conversation.isMute" size="30" @change="muteChange"></u-switch>
		</view>
		<view class="group u-border-bottom">
			<view class="main">
				<text class="u-font-30">聊天置顶</text>
			</view>
			<u-switch :value="conversation.isTop" size="30" @change="topChange"></u-switch>
		</view>
		<view class="group u-border-bottom" @tap="clearLog">
			<view class="main">
				<text class="u-font-30">清空聊天记录</text>
			</view>
			<text class="arrow iconfont icon-arrow-right"></text>
		</view>
		<view class="group u-border-bottom" @tap="searchLog">
			<view class="main">
				<text class="u-font-30">查找聊天记录</text>
			</view>
			<text class="arrow iconfont icon-arrow-right"></text>
		</view>
		<view class="group u-m-t-20" @tap="complain">
			<view class="main">
				<text class="u-font-30">举报用户</text>
			</view>
			<text class="arrow iconfont icon-arrow-right"></text>
		</view>
		<u-modal
			v-model="ask.show"
			title="" 
			showCancelButton
			:content="ask.content"
			@cancel="reject"
			@confirm="resolve"
		>
		</u-modal>
	</view>
</template>

<script>
	import {toast,delay,goback, jumpTo} from "@/utils/util.js"
	import * as sessionAPI from "@/api/session.js"
	import { TYPES as complainT } from "@/api/complain.js"
	import {
		mapState,
		mapActions
	} from 'vuex';
	import { ConversationType } from "@/entity/ConversationType";
	export default {
		data() {
			return {
				id:'',
				ask:{
					show:false,
					content:''
				},
				bridge:null,
				lock:false
			};
		},
		computed:{
			...mapState('chat', {
				conversation({conversationMap}){
					return conversationMap[this.id]
				}
			})
		},
		onLoad({id}){
			this.id = id
		},
		methods:{
			...mapActions('chat',['removeHistory','setConversation']),
			resolve(e){
				this.bridge&&this.bridge.resolve&&this.bridge.resolve(e)
			},
			reject(e){
				this.bridge&&this.bridge.reject&&this.bridge.reject(e)
			},
			async muteChange(){
				if(this.lock){
					return
				}
				try{
					this.lock = true
					if(this.conversation.sid){
						await sessionAPI.setSilent({id:this.conversation.sid,status:this.conversation.isMute?0:1})
					}
					this.setConversation({
						...this.conversation,
						isMute:!this.conversation.isMute
					})
				}finally{
					this.lock = false
				}
			},
			async topChange(){
				if(this.lock){
					return
				}
				try{
					this.lock = true
					if(this.conversation.sid){
						await sessionAPI.setTop({id:this.conversation.sid,status:this.conversation.isTop?0:1})
					}
					this.setConversation({
						...this.conversation,
						isTop:!this.conversation.isTop
					})
				}finally{
					this.lock = false
				}
			},
			async searchLog(){
				uni.navigateTo({
					url:`/pages/room/search?id=${this.id}&type=${ConversationType.Single}`
				})
			},
			async clearLog(){ 
				await new Promise((resolve,reject)=>{
					this.bridge = {
						resolve,
						reject
					}
					this.ask.show = true
					this.ask.content='确定要清除该好友的聊天记录吗?'
				})
				
				const clearTime = await sessionAPI.clearHistory(this.id,'用户')
				this.removeHistory(this.id)
				this.setConversation({
					id:this.conversation.id,
					clearTime
				})
				uni.$emit('clear_chat_history',{id:this.conversation.id,time:clearTime})
				await delay(500)
				toast('操作成功')
			},
			async complain(){ 
				
				
				
				
				
				
				
				
				jumpTo(`/pages/complain/index?btype=${complainT.user}&bid=${this.id}`)
				
				
				
				
				
				
				
				
				
				
				
				
				
			},
		}
	}
</script>

<style>
	page{
		background-color: #F5F5F5;
	}
</style>
<style lang="scss" scoped>
	.group{
		display: flex;
		align-items: center;
		min-height: 90rpx;
		background-color: #FFFFFF;
		padding: 14rpx 30rpx;
		.main{
			flex:1;
		}
		.arrow{
			font-size: 30rpx;
			color: #AAAAAA;
		}
	}
</style>
